<style>
	.left{
		width: 400px;
		float: left;
	}
	.right{
		width: 370px;
		float: right;
	}
	.left-top{
		width: 400px;
		height: 400px;
		background: #FFF;
		box-shadow: 0px 0px 15px #EEF4FA;
		border: 1px solid #F1F6FC;
		border-radius: 8px;
		opacity: 1;
	}
	.left-bottom{
		width: 400px;
		height: 850px;
		background: #FFF;
		box-shadow: 0px 0px 15px #EEF4FA;
		border: 1px solid #F1F6FC;
		border-radius: 8px;
		opacity: 1;
		margin-top: 16px;
	}
	.right-main{
		width: 370px;
		height: auto;
		background: #FFF;
		box-shadow: 0px 0px 15px #EEF4FA;
		border: 1px solid #F1F6FC;
		border-radius: 8px;
		opacity: 1;
	}
	.left-top-title{
		margin-top: 20px;
		margin-left: 20px;
		font-family: Source Han Sans CN;
		color: #3a385e;
		font-size: 20px;
    	font-weight: bold;
	}
	.left-bottom-title{
		margin-top: 20px;
		margin-left: 20px;
		font-family: Source Han Sans CN;
		color: #3a385e;
		font-size: 20px;
    	font-weight: bold;
	}
	.right-main-title{
		margin-top: 20px;
		margin-left: 20px;
		font-family: Source Han Sans CN;
		color: #3a385e;
		font-size: 20px;
    	font-weight: bold;
	}
	.main-title{
		margin-top: 20px;
		margin-left: 470px;
		font-family: Source Han Sans CN;
		color: #3a385e;
		font-size: 20px;
    	font-weight: bold;
	    text-align: left;
	}
	.main-figure-note{
		margin-top: 20px;
		margin-left: 470px;
		font-family: Source Han Sans CN;
		color: #6a798d;
		font-size: 16px;
		text-align: left;
	}
	.main-figure-note-1{
		margin-left: 20px;
		width: 50px;
		height: 24px;
		background: #7df8db;
		border: 1px solid #9ba5c0;
		display: inline-block;
	    vertical-align: bottom;
	}
	.main-figure-note-2{
		margin-left: 20px;
		width: 50px;
		height: 24px;
		background: #c8fdfd;
		border: 1px solid #9ba5c0;
		display: inline-block;
	    vertical-align: bottom;
	}
	.main-figure-note-3{
		margin-left: 20px;
		width: 50px;
		height: 24px;
		background: #ffffff;
		border: 1px solid #9ba5c0;
		display: inline-block;
	    vertical-align: bottom;
	}
	.left-top-area{
		margin-top: 20px;
		margin-left: 55px;
	}
	.left-top-nums{
		margin-top: 20px;
		margin-left: 55px;
	}
	.circleChart_0{
		width: 110px;
		height: 24px;
		font-family: Source Han Sans CN;
		font-size: 20px;
		color: #107ce5;
		text-align: center;
		margin-top: 10px;
	}
	.circleChart_1{
		width: 110px;
		height: 24px;
		font-family: Source Han Sans CN;
		font-size: 20px;
		color: #107ce5;
		text-align: center;
		margin-top: 10px;
	}
	.circleChart_2{
		width: 110px;
		height: 24px;
		font-family: Source Han Sans CN;
		font-size: 20px;
		color: #28c99d;
		text-align: center;
		margin-top: 10px;
	}
	.circleChart_3{
		width: 110px;
		height: 24px;
		font-family: Source Han Sans CN;
		font-size: 20px;
		color: #28c99d;
		text-align: center;
		margin-top: 10px;
	}
	.left-bottom-main{
		margin-top: 20px;
		margin-left: 20px;
		width: 360px;
	}
	.lab-title{
		
	}
	.structure-type{
		font-family: Source Han Sans CN;
		font-size: 14px;
		color: #3a385e;
	}
	.structure-type-value{
		font-family: Source Han Sans CN;
		font-size: 16px;
		color: #6a798d;
		margin-left: 20px;
	}
	.structure-type-value-unit{
		font-family: Source Han Sans CN;
		font-size: 14px;
		color: #6a798d;
		margin-left: 7px;
	}
	.p-bar{
		display: inline-block;
		width: 280px;
		height: 10px!important;
		margin-bottom: 0px!important;
	}
	.percentage{
		font-family: Source Han Sans CN;
		font-size: 14px;
		color: #3a385e;
		margin-left: 15px;
		display: inline-block;
	}
	.right-main-table{
		margin-top: 20px;
		margin-left: 20px;
		margin-bottom: 20px;
		width: 330px;
	}
	.datagrid-header-row td{
		background-color: #e5ebf7;
	}
	.datagrid-header td.datagrid-header-over{
		background: #e5ebf7!important;
	}
</style>
<div style="overflow-x: hidden;padding: 12px;background: #fafcff;">
	<div class="left">
		<div class="left-top">
			<div class="left-top-title">采集入库情况</div>
			<div class="left-top-area">
				<div style="display: inline-block;">
					<div class="circleChart" id="0" ></div>
					<div class="circleChart" id="p0" style="display: none;"></div>
					<div id="qgArea" class="circleChart_0"></div>
				</div>
				<div style="display: inline-block;margin-left: 60px;">
					<div class="circleChart" id="1" ></div>
					<div class="circleChart" id="p1" style="display: none;"></div>
					<div id="qgAreaSampling" class="circleChart_1"></div>
				</div>
			</div>
			<div class="left-top-nums">
				<div style="display: inline-block;">
					<div class="circleChart" id="2" ></div>
					<div class="circleChart" id="p2" style="display: none;"></div>
					<div id="qgCount" class="circleChart_2"></div>
				</div>
				<div style="display: inline-block;margin-left: 60px;">
					<div class="circleChart" id="3" ></div>
					<div class="circleChart" id="p3" style="display: none;"></div>
					<div id="qgCountSampling" class="circleChart_3"></div>
				</div>
			</div>
		</div>
		<div class="left-bottom">
			<div class="left-bottom-title">房屋抽样详查建筑结构类型统计</div>
			<div class="left-bottom-main">
				<ul class="nav nav-tabs" id="myTabStructure">
			        <li style="width: 180px; text-align: center;" class="active">
			            <a href="#areaStructure" id="areaStructurelab" role="tab" data-toggle="tab" class="lab-title">面积</a>
			        </li>
			        <li style="width: 180px; text-align: center;">
			            <a href="#numsStructure" id="numsStructurelab" role="tab" data-toggle="tab" class="lab-title">栋数</a>
			        </li>			        
			    </ul>
			    <div class="tab-content">
        			<div class="tab-pane fade in active" id="areaStructure" style="width: 100%;">
					    <div style="margin-top: 22px;">
					    	<span class="structure-type">砖混结构</span>
					    	<span id="brickArea" class="structure-type-value"></span>
					    	<span class="structure-type-value-unit">万平方米</span>
					    </div>
					    <div>
					    	<div class="progress p-bar">
								<div id="brickAreaProgress" class="progress-bar progress-bar-success" role="progressbar"
									 aria-valuenow="60" aria-valuemin="0" aria-valuemax="100"
									 style="width: 0%;background-color: #6f71fd;">							
								</div>
							</div>
							<span id="brickAreaSampling" class="percentage"></span>
					    </div>
						<div style="margin-top: 30px;">
							<span class="structure-type">砖木结构</span>
							<span id="brickwoodArea" class="structure-type-value"></span>
							<span class="structure-type-value-unit">万平方米</span>
						</div>
						<div>
							<div class="progress p-bar">
								<div id="brickwoodAreaProgress" class="progress-bar progress-bar-success" role="progressbar"
									 aria-valuenow="60" aria-valuemin="0" aria-valuemax="100"
									 style="width: 0%;background-color: #f5e656;">
								</div>
							</div>
							<span id="brickwoodAreaSampling" class="percentage"></span>
						</div>
		    			<div style="margin-top: 30px;">
					    	<span class="structure-type">多层钢筋混凝土结构</span>
					    	<span id="concreteArea" class="structure-type-value"></span>
					    	<span class="structure-type-value-unit">万平方米</span>
					    </div>
					    <div>
					    	<div class="progress p-bar">
								<div id="concreteAreaProgress" class="progress-bar progress-bar-success" role="progressbar"
									 aria-valuenow="60" aria-valuemin="0" aria-valuemax="100"
									 style="width: 0%;background-color: #28c99d;">
								</div>
							</div>
							<span id="concreteAreaSampling" class="percentage"></span>
					    </div>
					    <div style="margin-top: 30px;">
					    	<span class="structure-type">高层结构</span>
					    	<span id="highStructureArea" class="structure-type-value"></span>
					    	<span class="structure-type-value-unit">万平方米</span>
					    </div>
					    <div>
					    	<div class="progress p-bar">
								<div id="highStructureAreaProgress" class="progress-bar progress-bar-success" role="progressbar"
									 aria-valuenow="60" aria-valuemin="0" aria-valuemax="100"
									 style="width: 0%;background-color: #e9b74d;">
								</div>
							</div>
							<span id="highStructureAreaSampling" class="percentage"></span>
					    </div>
					    <div style="margin-top: 30px;">
					    	<span class="structure-type">工业厂房结构</span>
					    	<span id="factoryArea" class="structure-type-value"></span>
					    	<span class="structure-type-value-unit">万平方米</span>
					    </div>
					    <div>
					    	<div class="progress p-bar">
								<div id="factoryAreaProgress" class="progress-bar progress-bar-success" role="progressbar"
									 aria-valuenow="60" aria-valuemin="0" aria-valuemax="100"
									 style="width: 0%;background-color: #0ab524;">
								</div>
							</div>
							<span id="factoryAreaSampling" class="percentage"></span>
					    </div>
					    <div style="margin-top: 30px;">
					    	<span class="structure-type">空旷结构</span>
					    	<span id="wideStructureArea" class="structure-type-value"></span>
					    	<span class="structure-type-value-unit">万平方米</span>
					    </div>
					    <div>
					    	<div class="progress p-bar">
								<div id="wideStructureAreaProgress" class="progress-bar progress-bar-success" role="progressbar"
									 aria-valuenow="60" aria-valuemin="0" aria-valuemax="100"
									 style="width: 0%;background-color: #bb6ce8;">
								</div>
							</div>
							<span id="wideStructureAreaSampling" class="percentage"></span>
					    </div>
					    <div style="margin-top: 30px;">
					    	<span class="structure-type">土木结构</span>
					    	<span id="buildingArea" class="structure-type-value"></span>
					    	<span class="structure-type-value-unit">万平方米</span>
					    </div>
					    <div>
					    	<div class="progress p-bar">
								<div id="buildingAreaProgress" class="progress-bar progress-bar-success" role="progressbar"
									 aria-valuenow="60" aria-valuemin="0" aria-valuemax="100"
									 style="width: 0%;background-color: #6facfd;">
								</div>
							</div>
							<span id="buildingAreaSampling" class="percentage"></span>
					    </div>
					    <div style="margin-top: 30px;">
					    	<span class="structure-type">木结构</span>
					    	<span id="woodArea" class="structure-type-value"></span>
					    	<span class="structure-type-value-unit">万平方米</span>
					    </div>
					    <div>
					    	<div class="progress p-bar">
								<div id="woodAreaProgress" class="progress-bar progress-bar-success" role="progressbar"
									 aria-valuenow="60" aria-valuemin="0" aria-valuemax="100"
									 style="width: 0%;background-color: #ee4dd3;">
								</div>
							</div>
							<span id="woodAreaSampling" class="percentage"></span>
					    </div>
					    <div style="margin-top: 30px;">
					    	<span class="structure-type">石结构</span>
					    	<span id="stoneArea" class="structure-type-value"></span>
					    	<span class="structure-type-value-unit">万平方米</span>
					    </div>
					    <div>
					    	<div class="progress p-bar">
								<div id="stoneAreaProgress" class="progress-bar progress-bar-success" role="progressbar"
									 aria-valuenow="60" aria-valuemin="0" aria-valuemax="100"
									 style="width: 0%;background-color: #aca72d;">
								</div>
							</div>
							<span id="stoneAreaSampling" class="percentage"></span>
					    </div>
					    <div style="margin-top: 30px;">
					    	<span class="structure-type">其他</span>
					    	<span id="otherArea" class="structure-type-value"></span>
					    	<span class="structure-type-value-unit">万平方米</span>
					    </div>
					    <div>
					    	<div class="progress p-bar">
								<div id="otherAreaProgress" class="progress-bar progress-bar-success" role="progressbar"
									 aria-valuenow="60" aria-valuemin="0" aria-valuemax="100"
									 style="width: 0%;background-color: #4bc8e6;">
								</div>
							</div>
							<span id="otherAreaSampling" class="percentage"></span>
					    </div>
				    </div>
				    <div class="tab-pane fade" id="numsStructure" style="width: 100%;">
			            <div style="margin-top: 22px;">
					    	<span class="structure-type">砖混结构</span>
					    	<span id="brickCount" class="structure-type-value"></span>
					    	<span class="structure-type-value-unit">栋</span>
					    </div>
					    <div>
					    	<div class="progress p-bar">
								<div id="brickCountProgress" class="progress-bar progress-bar-success" role="progressbar"
									 aria-valuenow="60" aria-valuemin="0" aria-valuemax="100"
									 style="width: 0%;background-color: #6f71fd;">							
								</div>
							</div>
							<span id="brickCountSampling" class="percentage"></span>
					    </div>
						<div style="margin-top: 30px;">
							<span class="structure-type">砖木结构</span>
							<span id="brickwoodCount" class="structure-type-value"></span>
							<span class="structure-type-value-unit">栋</span>
						</div>
						<div>
							<div class="progress p-bar">
								<div id="brickwoodCountProgress" class="progress-bar progress-bar-success" role="progressbar"
									 aria-valuenow="60" aria-valuemin="0" aria-valuemax="100"
									 style="width: 0%;background-color: #6f71fd;">
								</div>
							</div>
							<span id="brickwoodCountSampling" class="percentage"></span>
						</div>
		    			<div style="margin-top: 30px;">
					    	<span class="structure-type">多层钢筋混凝土结构</span>
					    	<span id="concreteCount" class="structure-type-value"></span>
					    	<span class="structure-type-value-unit">栋</span>
					    </div>
					    <div>
					    	<div class="progress p-bar">
								<div id="concreteCountProgress" class="progress-bar progress-bar-success" role="progressbar"
									 aria-valuenow="60" aria-valuemin="0" aria-valuemax="100"
									 style="width: 0%;background-color: #28c99d;">
								</div>
							</div>
							<span id="concreteCountSampling" class="percentage"></span>
					    </div>
					    <div style="margin-top: 30px;">
					    	<span class="structure-type">高层结构</span>
					    	<span id="highStructureCount" class="structure-type-value"></span>
					    	<span class="structure-type-value-unit">栋</span>
					    </div>
					    <div>
					    	<div class="progress p-bar">
								<div id="highStructureCountProgress" class="progress-bar progress-bar-success" role="progressbar"
									 aria-valuenow="60" aria-valuemin="0" aria-valuemax="100"
									 style="width: 0%;background-color: #e9b74d;">
								</div>
							</div>
							<span id="highStructureCountSampling" class="percentage"></span>
					    </div>
					    <div style="margin-top: 30px;">
					    	<span class="structure-type">工业厂房结构</span>
					    	<span id="factoryCount" class="structure-type-value"></span>
					    	<span class="structure-type-value-unit">栋</span>
					    </div>
					    <div>
					    	<div class="progress p-bar">
								<div id="factoryCountProgress" class="progress-bar progress-bar-success" role="progressbar"
									 aria-valuenow="60" aria-valuemin="0" aria-valuemax="100"
									 style="width: 0%;background-color: #0ab524;">
								</div>
							</div>
							<span id="factoryCountSampling" class="percentage"></span>
					    </div>
					    <div style="margin-top: 30px;">
					    	<span class="structure-type">空旷结构</span>
					    	<span id="wideStructureCount" class="structure-type-value"></span>
					    	<span class="structure-type-value-unit">栋</span>
					    </div>
					    <div>
					    	<div class="progress p-bar">
								<div id="wideStructureCountProgress" class="progress-bar progress-bar-success" role="progressbar"
									 aria-valuenow="60" aria-valuemin="0" aria-valuemax="100"
									 style="width: 0%;background-color: #bb6ce8;">
								</div>
							</div>
							<span id="wideStructureCountSampling" class="percentage"></span>
					    </div>
					    <div style="margin-top: 30px;">
					    	<span class="structure-type">土木结构</span>
					    	<span id="buildingCount" class="structure-type-value"></span>
					    	<span class="structure-type-value-unit">栋</span>
					    </div>
					    <div>
					    	<div class="progress p-bar">
								<div id="buildingCountProgress" class="progress-bar progress-bar-success" role="progressbar"
									 aria-valuenow="60" aria-valuemin="0" aria-valuemax="100"
									 style="width: 0%;background-color: #6facfd;">
								</div>
							</div>
							<span id="buildingCountSampling" class="percentage"></span>
					    </div>
					    <div style="margin-top: 30px;">
					    	<span class="structure-type">木结构</span>
					    	<span id="woodCount" class="structure-type-value"></span>
					    	<span class="structure-type-value-unit">栋</span>
					    </div>
					    <div>
					    	<div class="progress p-bar">
								<div id="woodCountProgress" class="progress-bar progress-bar-success" role="progressbar"
									 aria-valuenow="60" aria-valuemin="0" aria-valuemax="100"
									 style="width: 0%;background-color: #ee4dd3;">
								</div>
							</div>
							<span id="woodCountSampling" class="percentage"></span>
					    </div>
					    <div style="margin-top: 30px;">
					    	<span class="structure-type">石结构</span>
					    	<span id="stoneCount" class="structure-type-value"></span>
					    	<span class="structure-type-value-unit">栋</span>
					    </div>
					    <div>
					    	<div class="progress p-bar">
								<div id="stoneCountProgress" class="progress-bar progress-bar-success" role="progressbar"
									 aria-valuenow="60" aria-valuemin="0" aria-valuemax="100"
									 style="width: 0%;background-color: #aca72d;">
								</div>
							</div>
							<span id="stoneCountSampling" class="percentage"></span>
					    </div>
					    <div style="margin-top: 30px;">
					    	<span class="structure-type">其他</span>
					    	<span id="otherCount" class="structure-type-value"></span>
					    	<span class="structure-type-value-unit">栋</span>
					    </div>
					    <div>
					    	<div class="progress p-bar">
								<div id="otherCountProgress" class="progress-bar progress-bar-success" role="progressbar"
									 aria-valuenow="60" aria-valuemin="0" aria-valuemax="100"
									 style="width: 0%;background-color: #4bc8e6;">
								</div>
							</div>
							<span id="otherCountSampling" class="percentage"></span>
					    </div>
			        </div>
				</div>
			</div>
			
		</div>
	</div>
	
	<div class="right">
		<div id="right-top" style="margin-top: 10px;margin-bottom: 20px;display: none;">
			<div style="display: inline-block;">
				<button id="backBtn1" class="btn btn-default" type="button" style="display: none;width: 100px;height: 36px;border-radius: 8px;background: #107ce5;">返回全国</button>
			</div>
			
			<div style="display: inline-block;margin-left: 20px;">
                <div id="selectProvince" style="width: 180px;height: 36px;display: none;">
                    <select class="form-control" id="belongtoProvince" name="belongtoProvince">
                        <option value="" selected style='display:none;'>选择省（直辖市）</option>
                    </select>
                </div>
            </div>
		</div>
		<div class="right-main">			
			<div class="right-main-title">各省(直辖市)已提交房屋数据统计</div>
			<div class="right-main-table">
				<ul class="nav nav-tabs" id="myTabTable">
			        <li style="width: 165px; text-align: center;" class="active">
			            <a href="#areaTable" id="areaTablelab" role="tab" data-toggle="tab" class="lab-title">面积</a>
			        </li>
			        <li style="width: 165px; text-align: center;">
			            <a href="#numsTable" id="numsTablelab" role="tab" data-toggle="tab" class="lab-title">栋数</a>
			        </li>			        
			    </ul>
			    <div class="tab-content" style="margin-top: 10px;">
        			<div class="tab-pane fade in active" id="areaTable" style="width: 100%;">
						<div id="areaGrid" style="height: auto;"></div>
        				
        			</div>
        			<div class="tab-pane fade" id="numsTable" style="width: 100%;">
						<div id="numsGrid" style="height: auto;"></div>
        				
        			</div>
        		</div>			    
			</div>
		</div>
	</div>
	<div class="center">
		<div class="main-title">各省(直辖市)已提交面积区划地图</div>
		<div class="main-figure-note">
			<span>面积范围（万平方米）</span>
			<div class="main-figure-note-1"></div><span style="color: #6a798d;">&nbsp;&nbsp;>25</span>
			<div class="main-figure-note-2"></div><span style="color: #6a798d;">&nbsp;&nbsp;0-25</span>
			<div class="main-figure-note-3"></div><span style="color: #6a798d;">&nbsp;&nbsp;未开展工作</span>
		</div>
		
    	<!--<button id="backBtn1" style="display: none;">返回上级</button>
    	<button id="backBtn2" style="display: none;">返回上级</button>    	-->
    	<div id="main" style="width:800px;height:600px;margin: 50px 440px;background-image:url('/static/app/fwsjcj/chinaMap/mapbg.png');background-repeat:no-repeat;background-size:cover;background-position: center;"></div>	
    	<div id="province" style="width:800px;height:600px;margin: 10px auto;display: none;background-image:url('/static/app/fwsjcj/chinaMap/mapbg.png');background-repeat:no-repeat;background-size:cover;background-position: center;"></div>
    	<div id="city" style="width:800px;height:600px;margin: 10px auto;display: none;"></div>
	</div>

  
</div>


